<template>
  <div class="edit-card">
    <div class="edit-head">
      <div v-if="title" class="edit-title" :class="{'edit-title-drag':drag}">{{title}}</div>
      <div>
        <slot name="title"></slot>
      </div>
      <div v-if="showClose" @click="close" class="edit-close el-icon-error"></div>
    </div>
    <div class="edit-cont">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "EditCard",
  props: {
    title: {
      type: [String, Number],
      default: ""
    },
    showClose: {
      type: Boolean,
      default: false
    },
    drag: {
      type: Boolean,
      default: false// true 显示拖拽的鼠标样式  false 普通鼠标样式
    }
  },
  methods: {
    close() {
      this.$emit("close")
    }
  }
}
</script>

<style lang="scss" scoped>

  //编辑区样式
  .edit-card {
    width: 100%;
    margin-bottom: 12px;
    border: 1px solid #eee;
    border-radius: 4px;

    .edit-head{
      position: relative;
      width: 100%;
      height: 34px;
      line-height: 34px;
      padding-left: 10px;
      background: #EFEFEF;
      .edit-title {
        width: 100%;
        height: 100%;
        font-size: 14px;
        color: #353535;
        &-drag{
          cursor: move;
        }
      }
      .edit-close{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 60px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
        color: #646464;
        cursor: pointer;
        &:hover{
          color: #f66161;
        }
      }
    }

    .edit-cont {
      width: 100%;
      padding: 10px;
      min-height: 40px;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
</style>
